<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>component/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>component/jquery-easyui-1.5.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=basePath%>component/jquery-easyui-1.5.1/demo/demo.css">
<link rel="stylesheet" type="text/css" href="common/css/allUser.css">
<script type="text/javascript" src="<%=basePath%>component/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>component/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
</head>
<body>
<div class="product-header-content">
		<div class="logo">
			<img src="common/images/logoLeft.png">
		</div>
		<div class="logoRight">
			<img src="common/images/logoRight.png">
		</div>
</div>
	<h2 style="text-align:center">Navigate Pics</h2>

	<table id="dg" class="easyui-datagrid" title="image"
		style="width: 742px; margin:0px auto"
		data-options="
			toolbar: '#tb',
			url: '<%=basePath%>'+'getjsondata.action',
			method: 'get',  
	        striped: true, 
	        remoteSort:false, 
			idField:'imgid',
			pagination:true, 
			rownumbers:true,
			frozenColumns:[[  
			{field:'ck',checkbox:true}  
			]]
			
			
		">
		<thead>
			<tr>
				<th data-options="field:'imgurl',width:400,align:'center'">imgurl</th>
				<th data-options="field:'effectivetime',width:160,align:'center'">effectivetime</th>
				<th data-options="field:'effective',width:120,align:'center'">effective</th>
			</tr>
		</thead>
	</table>

	<div id="tb" style="height: auto">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-add',plain:true" onclick="add()">Add</a>
		<a href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-edit',plain:true" onclick="edit()">Edit</a>
		<a href="javascript:void(0)" class="easyui-linkbutton"
			data-options="iconCls:'icon-cut',plain:true" onclick="removeimg()">Delete</a>
	</div>

	<div id="dd" class="easyui-dialog" title="Preview image" closed="true"
		style="width: 1100px; height: 450px;"
		data-options="toolbar:'#dd-toolbar',buttons:'#dd-buttons',resizable:true,modal:true">
		<img id="myimage" alt="" src="" style="width: 1000px; height: 300px;">
	</div>
	<div id="dd-toolbar" style="padding: 2px 0">
		<table cellpadding="0" cellspacing="0" style="width: 100%">
			<tr>
				<a href="javascript:void(0)" class="easyui-linkbutton"
					data-options="iconCls:'icon-edit',plain:true" onclick="uploadImg()">Edit</a>
				<!-- <a href="javascript:void(0)" class="easyui-linkbutton"
					data-options="iconCls:'icon-edit',plain:true" onclick="edittime()">Edit effetive time</a> -->
			</tr>
		</table>
	</div>
	<div id="dd-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#dd').dialog('close')">Close</a>
	</div>

	<div id="fb" class="easyui-dialog" title="uploadImg" closed="true"
		data-options="iconCls:'icon-save',buttons:'#file-buttons',resizable:true,modal:true">
		<form action="uploadimg.action" method="post" enctype="multipart/form-data">
			<input id="imageID" name="imageID" type="hidden"> <br>
			<input id="editfile" name="editfile" type="text" value="${image.imgurl}" data-options="required:true" style="width: 300px"> <br><br>
			<input class="easyui-datebox"  id="edittime" name="edittime" value="${image.effectivetime}" type="text" data-options="formatter:myformatter,parser:myparser,editable:false" style="width:300px"/><br><br>
			<h>effetive : </h>
			<input id="editefft" name="editeff" type="radio" value="true" checked="checked"/>true
			<input id="editefff" name="editeff" type="radio" value="false"/>false&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="submit" value="Save" class="easyui-linkbutton"/><br>
		</form>
		<div id="file-buttons">
			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:$('#fb').dialog('close')">Close</a>
		</div>
	</div>

	<div id="delete" class="easyui-dialog" title="Delete image"
		closed="true" data-options="resizable:true,modal:true">
		<form action="deleteimg.action" method="post"
			enctype="multipart/form-data">
			<input id="imageid" name="imageid" type="hidden">
			<h>Are you sure you want to delete this image?</h>
			<br>
			<br>
			<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="submit" value="Yes" class="easyui-linkbutton" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="button" value="No" class="easyui-linkbutton"
				onclick="javascript:$('#delete').dialog('close')" />
		</form>
	</div>

	<div id="add" class="easyui-dialog" title="Add image" closed="true"
		data-options="resizable:true,modal:true">
		<form action="addimage.action" method="post"
			enctype="multipart/form-data">
			<br>
			<h>image url : </h>
			<input id="addimgurl" name="addimgurl" type="text" data-options="required:true" style="width: 300px"><br>
			<br>
			<h>effetivetime : </h>
			<input class="easyui-datebox" id="addtime" value="$('#addtime').datebox('getValue')" name="addtime" type="text" data-options="formatter:myformatter,parser:myparser,required:true,editable:false" style="width:300px"/><br>
			<br>
			<h>effetive : </h>
			<input id="addefft" name="addeff" type="radio" value="true" checked="checked"/>true
			<input id="addefff" name="addeff" type="radio" value="false"/>false<br>
			<br>
			<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="submit" value="Save" class="easyui-linkbutton" id="subadd"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="button" value="Cancel" class="easyui-linkbutton" onclick="javascript:$('#add').dialog('close')" />
		</form>
	</div>

	<script type="text/javascript">
		var editor_imageURL="";
		var editor_effectivetime="";
		var editor_effective="";
		
		$(function() {
			var p = $('#dg').datagrid('getPager');
			$(p).pagination({
				pageList : [5, 10, 15, 20]
			});
		});
		
		/* 增加 */
		function add() {
			$('#add').dialog({
				closed : false
			})
			$('#addimgurl').filebox({
				buttonText : 'Choose File',
				buttonAlign : 'right'
			})
			var addimgurl = "";
			var addeff = "";
			addeff = $('#add input[name="addeff"]:checked').val();
			$('#addimgurl').val(addimgurl);
			$('.addeff').val(addeff);
		}
		
		/* 编辑 */
		function edit() {
			var selected = $("#dg").datagrid("getSelections");
			if (selected.length == 0) {
				alert("Please select a image！");
				return;
			}
			if (selected.length > 1) {
				alert("Please select only one image！");
				return;
			}
			var editeff = "";
			var imageURL = "";
			var imageID = "";
			var edittime = "";
			$.each(selected, function(index, item) {
				console.info("index is: " + index + "," + "item :" + item);
				imageURL = item['imgurl'];
				imageID = item['imgid'];
			});
			var ed = $("#dg").datagrid("getSelected");
			var edittime = ed.effectivetime;
			editeff = $('#fb input[name="editeff"]:checked').val();
			$('#dd').dialog({
				closed : false
			})
			$('#imageID').val(imageID);
			var imageV = $("#myimage", "#dd");
			editor_imageURL = imageURL;
			editor_effectivetime = edittime;
			editor_effective = editeff;
			imageV.attr("src", imageURL);
			$('.editeff').val(editeff);
		}

		/* 上传图片 */
		function uploadImg() {
			$('#editfile').val(editor_imageURL);
			$('#edittime').datebox('setValue',editor_effectivetime);
			$('.editeff').val(editor_effective);
			
			$('#fb').dialog({
				closed : false
			})
			$('#editfile').filebox({
			buttonText : 'Choose File',
			buttonAlign : 'right'
		 	})
			
		}
		
		function myformatter(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d); 
		}
		function myparser(s){
			if (!s) return new Date();
			var ss = (s.split('-'));
			var y = parseInt(ss[0],10);
			var m = parseInt(ss[1],10);
			var d = parseInt(ss[2],10);
			if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
				return new Date(y,m-1,d);
			} else {
				return new Date();
			}
		}
		
		/* function myformatter(date){
			console.info(date);
			return date===null?"":new Date(date.time).toISOString().split("T")[0]+" "+new Date(date.time).toISOString().split("T")[1].split(".")[0]; 
		} */
			
		/* 删除行 */
		function removeimg() {
			var selected = $("#dg").datagrid("getSelections");
			var data=$("#dg").datagrid("getData");
			if (selected.length == 0) {
				alert("Please select a image！");
				return;
			}
			if (selected.length > data.total-5) {
				alert("You must leave at least five images!");
				return;
			}
			var temID = "";
			for(i=0;i<selected.length;i++){
				if(temID ==""){
					temID = selected[i].imgid;
				}else{
					temID = selected[i].imgid + "," + temID;
				}
			}
			$('#delete').dialog({
				closed : false
			})
			$('#imageid').val(temID);
		}

	</script>
</html>